<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Op Art Generator and Animator</title>
		<link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='img/favicon.ico') }}">
		<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
	</head>
	<body>
		<h1>Welcome to Op Art Generator and Animator</h1>
		<br>
		<div class="container" style="display: flex;">
        	<div style="width: 50%;">
            	<img name="parallelogram" src="{{ url_for('static', filename=graph) }}" width="90%" onclick="showImg(this)" class="output" />
            	<p>Parallelogram<p>
        	</div>
        	<div style="flex-grow: 1;">
        		<form action="home" method="post">
					<input type="submit" value="Back to Image Selector" id="home" class="button">
				</form>
				<br>
            	<form action="output" method="post" id="outputForm">
					<span>Transparency(%)</span>
					<input type="range" id="shapeAlpha" name="shapeAlpha_input" min="0" max="100" step="1" value="{{ initShapeAlpha }}" class="slider">
					<input type="number" id="shapeAlphaValue" name="shapeAlpha_input_textbox" min="0" max="100" step="1" value="{{ initShapeAlpha }}" required>
					<br>
					<span>Mode</span>
					<select name="mode_input" id="mode">
  						<option value="png" {% if mode == "png"%} selected {% endif %}>PNG</option>
  						<option value="svg" {% if mode == "svg"%} selected {% endif %}>SVG</option>
					</select>
					<br>
					<br>
					<span>Angle</span>
					<input type="range" id="angle" name="angle_input" min="0" max="89" step="1" value="{{ initAngle }}" class="slider">
					<input type="number" id="angleValue" name="angle_input_textbox" min="0" max="89" step="1" value="{{ initAngle }}" required>
					<br>
					<span>Number of Stripes</span>
					<input type="number" id="stripes" name="stripes_input" min="1" step="1" value="{{ initStripes }}" required maxlength="3">
					<br>
					<span>Image Height</span>
					<input type="number" id="height" name="height_input" min="1" step="1" value="{{ initHeight }}" required maxlength="4">
					<br>
					<span>Length of Each Parallelogram</span>
					<input type="number" id="side" name="side_input" min="1" step="1" value="{{ initSide }}" required maxlength="3">
					<br>
					<span>Stripe Width</span>
					<input type="number" id="stripeWidth" name="stripeWidth_input" required min="1" step="1" value="{{ initStripeWidth }}" required maxlength="3">
					<br>
					<br>
					<span>Colour Pattern</span>
					<select name="colourPattern_input" id="colourPattern" onchange="showDivs(this)">
						<option value="random" {% if colourPattern == "random"%} selected {% endif %}>Random</option>
  						<option value="check" {% if colourPattern == "check"%} selected {% endif %}>Check</option>
					</select>
					<br>
					<div id="colourPatternDiv_random" {% if colourPattern == "random" %} style="display: block;" {% else %} style="display: none;" {% endif %}>
						<span>Adjacent Probability(%)</span>
						<input type="range" id="adjacentProbability" name="adjacentProbability_input" min="0" max="100" step="1" value="{{ initAdjacentProbability }}" class="slider">
						<input type="number" id="adjacentProbabilityValue" name="adjacentProbability_input_textbox" min="0" max="100" step="1" value="{{ initAdjacentProbability }}" required>
						<br>
						<span>Adjacent Numbers</span>
						<input type="text" id="adjacentNums" name="adjacentNums_input" value="{{ initAdjacentNums }}" class="longTextBox" required pattern="[1-9]+[0-9]*( [1-9]+[0-9]*)*">
						<br>
						<span>Zebra Pattern Numbers</span>
						<input type="text" id="zebraNums" name="zebraNums_input" value="{{ initZebraNums }}" class="longTextBox" required pattern="[1-9]+[0-9]*( [1-9]+[0-9]*)*">
						<br>
					</div>
					<br>
					<input type="submit" value="Generate" class="button">
				</form>
        	</div>
    	</div>
    	<script type="text/javascript">
    		var outputForm = document.getElementById("outputForm");
    		var inputs = outputForm.getElementsByTagName("input");
    		var selects = outputForm.getElementsByTagName("select");

			function checkValidThenSubmit(){
    			if (outputForm.checkValidity()) {
					outputForm.submit();
				} else {
					outputForm.reportValidity();
				}
    		}

			for (let i = 0; i < inputs.length; i++) {
				inputs[i].onchange = function() {
					checkValidThenSubmit();
				}
			}

			for (let i = 0; i < selects.length; i++) {
				selects[i].onchange = function() {
					checkValidThenSubmit();
				}
			}

    		var shapeAlphaSlider = document.getElementById("shapeAlpha");
			var shapeAlphaValue = document.getElementById("shapeAlphaValue");
			shapeAlphaValue.value = shapeAlphaSlider.value; // Display the default slider value

			// Update the current slider value (each time you drag the slider handle)
			shapeAlphaSlider.oninput = function() {
  				shapeAlphaValue.value = this.value;
			}

			// Overrides for loop on top
			shapeAlphaValue.onchange = function() {
            	shapeAlphaSlider.value = this.value;
            	checkValidThenSubmit();
            }

			var angleSlider = document.getElementById("angle");
			var angleValue = document.getElementById("angleValue");
			angleValue.value = angleSlider.value; // Display the default slider value

			// Update the current slider value (each time you drag the slider handle)
			angleSlider.oninput = function() {
  				angleValue.value = this.value;
            }

            // Overrides for loop on top
            angleValue.onchange = function() {
            	angleSlider.value = this.value;
            	checkValidThenSubmit();
            }

            var adjacentProbabilitySlider = document.getElementById("adjacentProbability");
			var adjacentProbabilityValue = document.getElementById("adjacentProbabilityValue");
			adjacentProbabilityValue.value = adjacentProbabilitySlider.value; // Display the default slider value

			// Update the current slider value (each time you drag the slider handle)
			adjacentProbabilitySlider.oninput = function() {
  				adjacentProbabilityValue.value = this.value;
            }

            // Overrides for loop on top
            adjacentProbabilityValue.onchange = function() {
            	adjacentProbabilitySlider.value = this.value;
            	checkValidThenSubmit();
            }

			function showDivs(element) {
				randomDiv = document.getElementById("colourPatternDiv_random");
				switch (element.value) {
					case "random":
						randomDiv.style.display = 'block';
						break;
					case "check":
						randomDiv.style.display = 'none';
						break;
					default:
						randomDiv.style.display = 'none';
				}
			}

			var imgSrc = "{{ url_for('static', filename=graph) }}"
			if (imgSrc == "/static/out/output.png" || imgSrc == "/static/out/output.svg") {
				document.querySelector("img.output").style.cursor = "pointer";
			}

			function showImg(element) {
				if (imgSrc == "/static/out/output.png" || imgSrc == "/static/out/output.svg") {
					window.location.href='{{ url_for("fullScreen") }}';
				}
			}
    	</script>
	</body>
</html>